<template>
	<view class="bg">
		<!-- LOGO、卡号、套餐大类、有效期 -->
		<view style="background-color: none;">
			<view class="div-card">
				<view class="div-card-left" v-if="logo">
					<img :src="logo" class='div-card-left-img'/>
				</view>
				<view class="div-card-right">
					<view class="div-card-right-item"><i class='iconfont icon-SIMqiaguanli' style="margin-right: 10upx;"></i>{{cardNumber}}</view>
					<view class="div-card-right-item" v-if="headerName"><i class="iconfont icon-taocanbanben" style="margin-right: 10upx;"></i>{{headerName}}</view>
					<!-- <view class="div-card-right-item"><i class="iconfont icon-shijian1" style="margin-right: 10upx;"></i>{{surplusDay}}</view> -->
				</view>
				<view class="div-card-fixed" @click="changeCard"><i class="iconfont icon-qiehuan"  style="margin-right: 10upx;"></i> 换卡</view>
			</view>
		</view>
		
		<!-- 套餐小类 -->
		<view class="div-package">
			<view class="div-package-item" v-for="item in mealList" @click="toRecharge(item)">
				<view class="div-package-item-border">
					<text v-if='item.dictMealType=="SETMEAL_BASE"'>基础包</text>
					<text v-if='item.dictMealType=="SETMEAL_ADD_OIL"'>加油包</text>
					<text v-if='item.dictMealType=="RELIEVE_LIMIT"'>解封包</text>
					<text v-if='item.dictMealType=="TRY_MEAL"'>试用包</text>
					<text v-if='item.dictMealType.indexOf("TONGYONG")==0'>通用</text>
				</view>
				<view class="div-package-item-content">
					<view class="div-package-item-content-title">{{item.mealName}}</view>
					<view class="div-package-item-content-content"><i class="iconfont icon-chanpinjieshao" style="margin-right: 10upx;"></i>流量：{{item.mealSpec}}</view>
					<view class="div-package-item-content-content"><i class="iconfont icon-shijian1" style="margin-right: 10upx;"></i>有效期：{{item.terOfValidity}} {{item.dwLabel}}</view>
					<view class="div-package-item-content-bottom" v-if="item.dictMonthlyPayment=='C_YES'">
						<i class="iconfont icon-xiangqingyeshangpu" style="margin-right: 10upx;"></i><text>支持分月到账</text>  
					</view>
				</view>
				<view class="div-package-item-button">
					<view class="trapezoid">
						<img src='../../../static/img/qian.png' class="trapezoid-qian" />
						<img src='../../../static/img/bolang.png' class="trapezoid-lang" />
						<text class="trapezoid-price"><text style="font-size: 30upx;">￥</text>{{item.priceLabel}}</text>
						<text class="trapezoid-text" >立即充值</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 切换卡号 -->
		<view class="div-dialog" v-if="showChangeCardsDialog">
			<view class="div-popup-body">
				<view class="div-dialog-body-title">
					<text ><i class="iconfont icon-SIMqiaguanli"></i>卡号列表</text>
					<text style="color: #999"><i class="iconfont icon-shanchu" @click="showChangeCardsDialog=false"></i>关闭</text>
				</view>
				<view class="div-dialog-body-table">
					<view :class="['div-dialog-body-table-item',index%2==0?'even':'odd']" v-for="(item,index) in cardList" @click="chooseNewCard(item)">
						<i class="iconfont icon-yidong blue" v-if='item.dictCardOperator=="CARDMOBILE"'></i>
						<i class="iconfont icon-liantong red" v-if='item.dictCardOperator=="CARDUNICOM"'></i>
						<i class="iconfont icon-yingyeting darkBlue" v-if='item.dictCardOperator=="CARDTELECOM"||item.dictCardOperator=="TELECOM"'></i>
						<text>{{item.cardNumber}}</text>
						<text class="div-dialog-body-table-item-status">{{item.dictChannelCardStatusName}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 充值弹窗 -->
		<view class="div-dialog" v-if="showPaymentDialog">
			<view class="div-popup-body">
				<view class="div-popup-top">
					<text>套餐订购</text>
					<text><i class="iconfont icon-shanchu close" @click="closePopup">关闭</i></text>
				</view>
				<view class="div-popup-border">
					<view class="div-popup-line">
						<view class="div-popup-line-label">套餐名称</view>
						<view class="div-popup-line-prop">{{meal.mealName}}</view>
					</view>
					<view class="div-popup-line">
						<view class="div-popup-line-label">套餐单价</view>
						<view class="div-popup-line-prop"><text style="font-size: 22upx;">￥</text>{{meal.priceLabel}}</view>
					</view>
					<view class="div-popup-line">
						<view class="div-popup-line-label">生效时间</view>
						<view class="div-popup-line-prop" v-if="meal.dictIsPreStorage!='YES'" style="color: #969896;">本月生效</view>
						<view class="div-popup-line-prop" v-if="meal.dictIsPreStorage=='YES'">
							<radio-group name="radio" @change="changeShengxiao" >
								<radio value="NO" class="radio-select" /><text :style="{'color':dictIsPreStorage=='NO'?'#007AFF':'#888','margin-right': '10px'}">立即生效</text>
								<radio value="YES" class="radio-select" /><text :style="{'color':dictIsPreStorage=='YES'?'#007AFF':'#888'}">次月生效</text>
							</radio-group>
						</view>
					</view>
					<view class="div-popup-line">
						<view class="div-popup-line-label">连续充值</view>
						<view class="div-popup-line-prop" v-if="meal.dictIsTerOfValiditySuper!='C_YES'" >
							<text style="color: #969896;">此套餐暂不支持连续充值</text>
						</view>
						<view class="div-popup-line-input" v-if="meal.dictIsTerOfValiditySuper=='C_YES'" >
							<uni-number-box @change="amountChange" :min="1" :max="12" style="margin-right: -10px;"></uni-number-box>
						</view>
					</view>
					<view class="div-popup-line">
						<view class="div-popup-line-label">付款方式</view>
						<view class="div-popup-line-prop">
							<radio-group name="radio" @change="changeRechargeType" >
								<radio value="YE" class="radio-select" /><text :style="{'color':dictPayTunnel=='YE'?'#007AFF':'#888','margin-right': '10px'}">余额</text>
								<radio value="WX" class="radio-select" v-if="dictIsBuyInAmount!='C_YES'"/><text v-if="dictIsBuyInAmount!='C_YES'" :style="{'color':dictPayTunnel=='WX'?'#007AFF':'#888','margin-right': '10px'}">在线支付</text>
							</radio-group>
						</view>						
					</view>
					<view class="div-popup-line" style="border-bottom: none;">
						<view class="div-popup-line-label">套餐介绍</view>
						<view class="div-popup-line-discribe">{{discribe}}</view>
						<!-- <img src="../../../static/img/city.svg" class="img-city"/> -->
					</view>					
				</view>
				<view class="div-popup-btn" @click="next">已阅读，下一步</view>
			</view>
			<pay-keyboard :show_key="show_key" @hideFun="hideFun" @getPassword="getPassword"></pay-keyboard>
		</view>
	</view>
</template>

<script>
	import payKeyboard from '@/components/keyboard.vue'
	import pay from '@/utils/wxpayUtils.js'
	import { decryptDes } from '@/utils/utils'
	export default {
		components: {
			payKeyboard
		},
		data() {
			return {
				dictCardOperatorName: '',
				cardNumber: '',
				cardId: '',
				time: '',
				headerName: '',				//套餐大类
				surplusDay: '',				//剩余时间
				discribe: '',				//套餐描述
				logo: '',
				mealList: [],				//套餐列表
				showChangeCardsDialog: false,//换卡列表
				cardList: [],				//换卡列表
				card: {},					//待充值卡对象
				meal: {},					//待充值套餐对象
				rechargeLoading: false,		//充值按钮loading
				dictIsPreStorage: '',		//用户充值套餐--是否次月生效
				dictIsTerOfValiditySuper: 1,//用户充值套餐--连续充值次数
				dictPayTunnel: '',			//用户充值套餐--支付方式 余额 or 其他
				showPaymentDialog: false,	//支付弹窗
				show_key: false,			//余额支付密码
				payed: false,				//是否已余额付款
				dictIsBuyInAmount: '',		//是否仅支持余额付款 是-C_YES
				wxFlag: false,
			}
		},
		async onLoad(option) {
			let _this = this;
			if(this.payed){
				uni.switchTab({
					url: '/pages/tabbar/cardList/cardList'
				});
			}
			if (option.cardNumber == undefined || option.cardNumber == null) { //二维码跳转进来的
				let url = window.location.href;
				let newUrl = window.location.protocol + '//' + window.location.host + '/pages/tabbar/recharge/bookPackage';
				let para = "";
				if (url.lastIndexOf("?") > 0) {
					para = url.substring(url.lastIndexOf("?") + 1, url.length);
					let arr = para.split("&");
					let arr1 = arr[0].split('=');
					let arr2 = arr[1].split('=');
					_this.code = arr1[1];
					_this.cardId = arr2[1];
					window.history.pushState({}, 0, newUrl)
					let obj = await this.$req.singOn('customer/returnInfo/white', {
						cardId: _this.cardId,
						code: _this.code
					})
					if (obj.data) {
						newUrl += '&cardNumber=' + obj.data.cardNumber + '&operatorName=' + obj.data.dictOperatorNameName + '&time='
						_this.cardNumber = obj.data.cardNumber;
						_this.operatorName = obj.data.dictOperatorNameName;
						_this.time = '';
						_this.openid = obj.data.openid;
			
						uni.setStorage({
							key: 'custoken',
							data: obj.data.token
						});
					}
				}
			
			} else {
				_this.cardId = option.cardId
				_this.cardNumber = option.cardNumber
				_this.dictCardOperatorName = option.operatorName
				_this.time = option.time
				if(option.operatorName=='电信'){
					_this.logo = '../../../static/img/dianxin.svg';
				}
				else if(option.operatorName=='移动'){
					_this.logo = '../../../static/img/yidong.svg';
				}
				else if(option.operatorName=='联通'){
					_this.logo = '../../../static/img/liantong.svg';
				}
				else if(option.operatorName=='广电'){
					_this.logo = '../../../static/img/guangdian.png';
				}				
				else{
					_this.logo = '../../../static/img/weizhi.svg';
				}
			}
			await this.initDate()
		},
		methods: {
			//数据加载
			initDate() {
				let _this = this;
				this.$req.userRecharge('customer-order/listSetMealByCardId', {
					id: this.cardId,
					searchDate: this.time
				}).then(v => {
					if (v) {
						_this.surplusDay = v.data.time?'有效期剩余 '+v.data.time+' 天':'未检索到有效期剩余时间';
						_this.headerName = v.data.headerName
						this.discribe = v.data.explainText
						this.mealList = [];
						v.data.listSetMeal.forEach(setMeal => {
							let obj = {}
							obj.id = setMeal.id
							obj.mealName = setMeal.mealName
							obj.mealSpec = this.$toGB.exe(setMeal.mealSpec)
							obj.terOfValidity = setMeal.terOfValidity
							let dw = setMeal.dictTerOfValidityName == "月" ? "个" : "";
							let dwLabel = dw + setMeal.dictTerOfValidityName
							obj.dwLabel = dwLabel
							obj.priceLabel = setMeal.salePrice;
							obj.displayLabel = setMeal.displayLabel;
							obj.labelDisplayColor = setMeal.labelDisplayColor
							obj.dictIsTerOfValiditySuper = setMeal.dictIsTerOfValiditySuper	//连续充值 否--C_NO
							obj.dictIsPreStorage = setMeal.dictIsPreStorage					//次月生效 否--NO
							obj.dictMonthlyPayment = setMeal.dictMonthlyPayment				//分月到账 否--NO
							obj.dictIsBuyInAmount = v.data.dictIsBuyInAmount				
							obj.dictMealType = setMeal.dictMealType							//套餐小类类型
							this.mealList.push(obj)
						})
					}
			
				})
			},
			//点击换卡
			async changeCard(){
				let obj = await this.$req.userData('card-customer/listUserCardForCut', {
					cardId: this.cardId
				})
				if (obj.data) {
					this.cardList = [];
					this.cardList = new Array(...obj.data)
					this.showChangeCardsDialog = true;
				} else {
					uni.showModal({
						content: '您暂无其他可切换卡片'
					})
				}
			},
			//切换卡号
			async chooseNewCard(item){
				this.cardId = item.id;
				this.cardNumber = item.cardNumber;
				this.operatorName = item.dictCardOperatorName;
				this.time = '';
				if(this.operatorName=='电信'){
					this.logo = '../../../static/img/dianxin.svg';
				}
				else if(this.operatorName=='移动'){
					this.logo = '../../../static/img/yidong.svg';
				}
				else if(this.operatorName=='联通'){
					this.logo = '../../../static/img/liantong.svg';
				}
				else{
					this.logo = '../../../static/img/weizhi.svg';
				}
				let obj_time = await this.$req.userData('card/getCardData', {
					id: item.id
				});
				if (obj_time) {
					this.time = obj_time.data.expirationDate
				}
				
				await this.initDate();
				this.showChangeCardsDialog = false;
			},
			//点击充值
			toRecharge(item){
				this.meal = item;
				this.rechargeLoading = false;
				this.dictIsPreStorage = item.dictIsPreStorage=='YES'?'':'NO';	//是否次月生效
				this.dictIsTerOfValiditySuper = 1;								//是否次月生效
				this.dictIsBuyInAmount = item.dictIsBuyInAmount;				//是否仅支持余额付款
				this.dictPayTunnel = '';				
				this.showPaymentDialog = true;
			},
			closePopup(){
				this.showPaymentDialog = false;
				setTimeout(function(){
					this.meal = {};
					this.rechargeLoading = false;
				},1000)
			},
			changeShengxiao(evn) {
				this.dictIsPreStorage = evn.detail.value
			},
			amountChange(value) {
				this.dictIsTerOfValiditySuper = value
			},
			changeRechargeType(evn) {
				this.dictPayTunnel = evn.detail.value=='YE'?'YE':'WX';
			},
			//点击下一步
			async next(){
				/**
				 * 如果是余额充值就去获取一个pagekey并解密
				 * 然后弹出输入密码
				 * 密码输入完毕后传入接口
				 * 直到成功关闭界面
				 * 然后清除pagekey
				 */
				var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
				this.wxFlag = ua.match(/MicroMessenger/i) == "micromessenger"?true:false;
				if (this.dictPayTunnel == '') {
					this.$message("请选择一个付款方式！")
					return
				}
				if (this.dictIsPreStorage == '') {
					this.$message("请选择生效时间")
					return
				}
				if (this.dictPayTunnel == "YE") {
					//校验这张卡是不是有密码 如果没有密码就跳转到设置密码页面
					let ifPassword = await this.$req.userData("card/getCardIfSetPassword", {
						id: this.cardId
					})
					if (!ifPassword.data) {
						this.$message("您的卡号没有设置密码，两秒后跳转到设置密码页面！")
						let uri = this.$mp.page.route + "?cardId=" + this.cardId + "&cardNumber=" + this.cardNumber + "&operatorName=" + this.operatorName
						uri = encodeURIComponent(uri)
						
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/other/updatePassword/updatePassword?cardId=' + this.cardId + "&_redir=" + btoa(uri)
							});
						}, 2000)
						return
					}
					
					this.show_key = true
				} //如果是微信
				else{
					/* 
					   通过后台接口查询：
						①是否实名 未实名-关闭抽屉  已实名--进入支付流程
						②获取套餐金额 传入下一页
					 */
					let form = {
						amount: this.dictIsTerOfValiditySuper,		//连续充值次数
						dictIsPreStorage: this.dictIsPreStorage,	//是否次月生效
						dictPayTunnel: this.dictPayTunnel,			//支付方式
						password: '',
						setMealId: this.meal.id,
						cardId: this.cardId,
					}
					let res = await this.$req.userRecharge('customer-order/getCustomerOrderPrice',form);
					if(res._result&&res.code==10000){
						uni.navigateTo({
							// url: '/pages/other/payment/payment?amount='+this.amount+'&dictIsPreStorage='+this.dictIsPreStorage+'&setMealId='+this.meal.id+'&cardId='+this.cardId+'&cardNumber='+this.cardNumber+'&price='+res.data+'&type=meal'
							url: '/pages/other/payment/payment?amount='+this.dictIsTerOfValiditySuper+'&dictIsPreStorage='+this.dictIsPreStorage+'&setMealId='+this.meal.id+'&cardId='+this.cardId+'&cardNumber='+this.cardNumber+'&price='+res.data+'&type=meal'
						})
					}
				}
			},
			hideFun() {
				this.show_key = false
			},
			async getPassword(n) {
				let password = n.password
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				let pk = await this.$req.sendCheck('/pageKey/get.dnl')
				let key = decryptDes(pk.data, 'shendawl', ['s', 'h', 'e', 'n', 'd', 'a', 'w', 'l'])
				let form = {
					amount: this.dictIsTerOfValiditySuper,		//连续充值次数
					dictIsPreStorage: this.dictIsPreStorage,	//是否次月生效
					dictPayTunnel: this.dictPayTunnel,			//支付方式
					password,
					setMealId: this.meal.id,
					cardId: this.cardId,
					pagekey: key
				}
				
				let that = this
				try {
					let obj = await this.$req.userRecharge('balanceRecharge/balanceRechargeSetmeal/recheck', form)
					if (obj._result&&obj.data) {
						that.payed = true;
						that.$message('充值成功');
						setTimeout(function(){
							if(obj.data.realNameUrl){
								window.location.href = obj.data.realNameUrl
							}
							else{
								//充值成功后跳转到卡列表页
								uni.navigateTo({
									url: '/pages/cardController/newIndex?cardId=' + that.cardId+'&cardNumber='+that.cardNumber+'&operatorName='+that.dictCardOperatorName
								});
							}
						},2000)
					}
				} catch (e) {
					if (e.code == 220010) {
						uni.showModal({
							title: '提示',
							content: '您的余额不足是否跳转到充值页面',
							success: function(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/tabbar/recharge/newBalanceRecharge?cardId=' + that.cardId + "&cardNumber=" + that.cardNumber+'&operatorName='+that.dictCardOperatorName
									});
								} else if (res.cancel) {
									that.show_key = false
									that.showPaymentDialog = false;
									that.payed = false;
								}
							}
						});
						uni.hideLoading()
					}
			
				}
				uni.hideLoading()
			},
		}
	}
</script>

<style>
	.bg{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		
	}
	.div-card{
		width: 100%;
		height: 300upx;
		position: relative;
		top: 0;
		left: 0;
		border-radius: 0 0 0 100upx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		background-image: linear-gradient(135deg, #F5F9FF 0%, #408CFF 100%);
	}
	.div-card-img{
		width: 100%;
		height: auto;
		position: absolute;
		top: 0;
		left: 0;
	}
	.div-card-left{
		width: 28%;
		height: 100%;
		left: 2%;
		top: 0;
		position: relative;
		display: inline-flex;
		justify-content: center;
		align-items: center;
	}
	.div-card-left-img{
		width: 94%;
		height: auto;
	}
	.div-card-right{
		width: 68%;
		height: auto;
		position: relative;
		left: 2%;
		top: 0;
		display: inline-flex;
		flex-direction: column;
		padding: 60upx 0;
	}
	.div-card-right-item{
		width: 90%;
		height: 60upx;
		position: relative;
		top: 0;
		left: 5%;
		line-height: 60upx;
		font-size: 30upx;
		line-height: 70upx;
		color: #FFFFFF;
		font-weight: bold;
		display: flex;
		align-items: center;
	}
	.div-card-fixed{
		width: auto;
		height: 60upx;
		position: absolute;
		top: 120upx;
		right: 0;
		background-image: linear-gradient(to right, #FFEFCF 0%, #FBDA32 100%);
		border-radius: 60upx 0 0 60upx;
		color: #ECA300;
		padding: 0 24upx;
		font-size: 28upx;
		line-height: 80upx;
		letter-spacing: 2px;
		display: flex;
		align-items: center;
	}
	.div-package{
		width: 96%;
		height: calc(100% - 320upx);
		position: relative;
		top: 0;
		left: 0;
		overflow-y: scroll;
		padding: 20upx 2%;
	}
	.div-package-item{
		width: 100%;
		height: 200upx;
		position: relative;
		top: 0;
		left: 0;
		border-radius: 10px;
		background-image: linear-gradient(to bottom, #FCFCFC 0%, #ECECEC 100%);
		margin: 20upx 0;
		z-index: 1;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		overflow: hidden;
	}
	.img-fenyue{
		position: absolute;
		width: 80upx;
		height: auto;
		z-index: 2;
		left: 60%;
		top: 10%;
	}
	.div-package-item-border{
		width: 60upx;
		height: 100%;
		background-image: linear-gradient(to bottom, #A0C6FF 0%, #408CFF 100%);
		display: inline-flex;
		justify-content: center;
		align-items: center;
		color: #FFFDEF;
		font-size: 28upx;
		writing-mode: vertical-rl;
		text-align: center;
		letter-spacing: 5px;
	}
	.div-package-item-content{
		width: calc(70% - 90upx);
		height: 100%;
		display: inline-flex;
		flex-direction: column;
		align-items: space-between;
		justify-content: space-around;
		font-size: 10px;
		align-content: center;
		padding: 20upx 0;
		
	}
	.div-package-item-content-title{
		width: 100%;
		height: auto;
		font-size: 32upx;
		color: #408CFF;
		line-height: 40upx;
	}
	.div-package-item-content-content{
		width: 100%;
		height: 30upx;
		font-size: 28upx;
		color: #888;
		line-height: 30upx;
	}
	.div-package-item-content-bottom{
		width: 100%;
		height: 30upx;
		line-height: 30upx;
		font-size: 28upx;
		background:-webkit-linear-gradient(left,#3791FF,#509FFF 25%,#69ADFF 50%,#82BAFF 75%,#9BC8FF);
		color: #3791FF;
		background-image: -webkit-linear-gradient(92deg, #3791FF, #B4D6FF);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		-webkit-animation: hue 30s infinite linear;		
	}
	.div-package-item-button{
		width: 28%;
		height: 100%;
		display: inline-flex;
		justify-content: center;
		align-items: center;
	}
	.trapezoid{
	  position:relative;
	  height: 96%;
	  width: 100%;
	  overflow:hidden;
	  border-radius: 10upx;
	}
	.trapezoid:before{
	  content:'';
	  display:block;
	  position:absolute;
	  top:0;
	  bottom:0;
	  right:0;
	  width: 100%;
	  transform-origin:0 100%;
	  transform:skewX(160deg);
	  background: linear-gradient(to bottom, #A0C6FF 0%, #408CFF 100%);
	  border-radius: 5px;
	  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	  overflow:hidden;
	}
	.trapezoid-qian{
		width: 80upx;
		height: auto;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 2;
		-moz-transform:rotate(-30deg);
		-webkit-transform:rotate(-30deg);
		margin: -10upx;
	}
	.trapezoid-lang{
		width: 100%;
		height: auto;
		position: absolute;
		left: 0;
		bottom: 10upx;
		z-index: 2;
	}
	.trapezoid-price{
		width: 83%;
		height: auto;
		font-size: 50upx;
		position: absolute;
		top: 30%;
		left: 17%;
		z-index: 2;
		text-align: center;
		font-weight: 400;
		letter-spacing: 1px;
		color: #fff;
	}
	.trapezoid-text{
		width: 88%;
		height: auto;
		color: #fff;
		font-size: 36upx;
		position: absolute;
		top: 65%;
		left: 12%;
		z-index: 2;
		text-align: center;
		font-weight: bold;
		letter-spacing: 1px;
	}
	
	@keyframes hue {
	  from {
	    filter: hue-rotate(0deg);
	  }
	  to {
	    filter: hue-rotate(-360deg);
	  }
	}
	
	/* -------------以下是换卡列表样式---------------- */
	.div-dialog{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0,0,0,0.7);
		z-index: 5;
	}
	.div-dialog-body{
		width: 100%;
		height: 50%;
		position: absolute;
		bottom: 0;
		left: 0;
		background-image: linear-gradient(45deg, #FFFFFF 0%, #ECF1FF 100%);
		z-index: 7;
		border-radius: 4px 4px 0 0;
	}
	.div-dialog-body-title{
		width: 94%;
		height: 70upx;
		position: relative;
		top: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28upx;
		color: #78A8F2;
		padding: 10upx 3%;
	}
	.div-dialog-body-table{
		width: 90%;
		height: calc(50vh - 70upx);
		position: relative;
		padding-bottom: 20upx;
		display: flex;
		flex-direction: column;
		overflow-y: scroll;
		align-items: center;
		justify-content: flex-start;
		margin: 1% 5%;
		z-index: 6;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		border-radius: 4px;
	}
	.div-dialog-body-table-item{
		width: 94%;
		height: 80upx;
		position: relative;
		top: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10upx 3%;
		flex-shrink: 0;
	}
	.odd{
		/* background-color: #DDE9FC; */
		background-color: #fafafa;
	}
	.even{
		background-color: #EEF5FF;
	}
	.darkBlue{
		color: #0077AA;
	}
	.blue{
		color: #0E83E2;
	}
	.red{
		color: #E44747;
	}
	.div-dialog-body-table-item-status{
		width: 100upx;
		height: 100%;
		text-align: right;
		font-size: 28upx;
		line-height: 80upx;
	}
	/* -------------以下是预支付样式---------------- */
	.div-popup-body{
		width: 100%;
		height: auto;
		max-height: 80vh;
		position: absolute;
		bottom: 0;
		left: 0;
		background-image: linear-gradient(45deg, #FFFFFF 0%, #ECF1FF 100%);
		z-index: 5;
		border-radius: 5px 5px 0 0;
		overflow-y : scroll;
	}
	.div-popup-top{
		width: 96%;
		height: 80upx;
		position: relative;
		padding: 10upx 2%;
		color: #333;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.div-popup-border{
		width: 90%;
		height: auto;
		position: relative;
		margin: 1% 5%;
		z-index: 6;
		background-color: #FFFFFF;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		border-radius: 4px;
	}
	.div-popup-line{
		width: 92%;
		height: auto;
		position: relative;
		margin: 0 4%;
		border-bottom: 1px solid #e6e6e6;
	}
	.div-popup-line-label{
		width: 100%;
		height: 60upx;
		line-height: 60upx;
		font-size: 28upx;
		color: #333;
	}
	.div-popup-line-prop{
		width: 100%;
		height: 60upx;
		font-size: 32upx;
		color: #007AFF;
		line-height: 60upx;
		text-align: right;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.div-popup-line-input{
		width: 100%;
		height: 80upx;
		font-size: 32upx;
		color: #007AFF;
		display: flex;
		justify-content: flex-end;
		align-items: flex-start;
	}
	.div-popup-line-discribe{
		width: 100%;
		height: auto;
		font-size: 28upx;
		color: #888;
		line-height: 50upx;
		white-space: pre-wrap;
		padding-bottom: 10px;
		z-index: 11;
	}

	.div-popup-btn{
		width: 90%;
		height: 80upx;
		border-radius: 10upx;
		color: #FFFDEF;
		background: linear-gradient(to bottom, #A0C6FF 0%, #408CFF 100%);
		line-height: 80upx;
		text-align: center;
		letter-spacing: 3px;
		margin: 20px 5%;
		z-index: 11;
	}
	.img-city{
		width: 50%;
		height: auto;
		position: absolute;
		bottom: 30%;
		right: 0;
		opacity: 0.4;
		z-index: 10;
		margin-right: -5%;
	}
	.close{
		color: #999;
		font-size: 28upx;
	}
	.radio-font {
		font-size: 32upx;
		line-height: 22px;
	}
	.radio-select {
		transform: scale(0.7);
	}
	
</style>
